<template>
  <div class="WorkingSchedule" v-loading="loading">
    <el-form ref="form" :model="form" label-position="top" class="myform">
      <div>
        <el-form-item label="组合编码" class="myform-item">
          <el-input
            v-model="form.number"
            placeholder="请输入套装编码"
            clearable
            @keyup.enter.native="onSearch"
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 50px">
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </div>
      <div>
        <!-- <el-form-item style="margin-top: 50px">
          <el-button
            type="primary"
            @click="onEdit()"
            icon="el-icon-plus"
            >新建</el-button
          >
        </el-form-item> -->
      </div>
    </el-form>
    <el-table :data="tableData" style="width: 100%" size="mini" border>
      <el-table-column
        label="组合编码"
        align="center"
        prop="zh_number"
      ></el-table-column>
      <el-table-column
        label="SKU"
        align="center"
        prop="sku_code"
      ></el-table-column>
      <el-table-column
        label="同步时间"
        align="center"
        prop="sy_time"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            size="mini"
            @click="onDetail(row)"
            style="color: #edbf40"
            >查看</el-button
          >
          <el-button type="text" size="mini" @click="onAdd(row)"
            >编辑</el-button
          >
          <el-button type="text" size="mini" @click="onSync(row)"
            >同步</el-button
          >
          <!-- <el-button type="text" size="mini" @click="onLook(row.type_no)"
            >组合详情</el-button
          > -->
          <!-- <el-button type="text" size="mini" style="color:#ED5240" @click="onLook(row.type_no)">禁用套装</el-button> -->
          <!-- <el-button type="text" @click="onEdit(row.id)">下载</el-button> -->
          <!-- <el-button
            type="text"
            style="color: red"
            v-if="row.size_code_status == 1"
            @click="onIs(row.type_no, 0)"
            >解锁</el-button
          >
          <el-button
            type="text"
            style="color: #67c23a"
            v-if="row.size_code_status == 0"
            @click="onIs(row.type_no, 1)"
            >锁定</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postAdminOperateGetZhstyle"
    />
    <el-dialog
      title="编辑组合商品"
      :visible.sync="dialogVisible"
      width="950px"
      :before-close="handleClose"
    >
      <div class="dialogVisibleMy">
        <!-- <div class="dialogVisibleMy-title">
          <div>套装编码：{{ row.number }}</div>
          <div>套装名称：{{ row.name }}</div>
        </div> -->
        <!-- <el-table
          :data="tableDataDialog"
          style="width: 100%"
          size="mini"
          @selection-change="handleSelectionChange"
          border
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            label="款号"
            align="center"
            prop="number"
          ></el-table-column>
          <el-table-column
            label="款名"
            align="center"
            prop="name"
          ></el-table-column>
        </el-table> -->
        <div class="dialogVisibleMy-text">
          <div>
            <div><span class="star"></span> 组合名称</div>
            <el-input
              v-model="data.zh_name"
              placeholder="请输入组合名称"
              size="mini"
              clearable
            ></el-input>
          </div>
          <div class="">
            <div>组合颜色</div>
            <el-input
              v-model="data.zh_color_name"
              placeholder="请输入组合颜色"
              size="mini"
              clearable
            ></el-input>
          </div>
          <div class="">
            <div>成本价</div>
            <el-input
              type="number"
              v-model="data.cost_price"
              placeholder="请输入成本价"
              size="mini"
              clearable
            ></el-input>
          </div>
          <div class="">
            <div>销售价</div>
            <el-input
              type="number"
              v-model="data.sales_price"
              placeholder="请输入销售价"
              size="mini"
              clearable
            ></el-input>
          </div>
          <!-- <div class="">
            <div>分销价</div>
            <el-input
              v-model="data.zh_name"
              placeholder="请输入分销价"
              size="mini"
              clearable
            ></el-input>
          </div> -->
          <div class="">
            <div>吊牌价</div>
            <el-input
              type="number"
              v-model="data.tag_price"
              placeholder="请输入吊牌价"
              size="mini"
              clearable
            ></el-input>
          </div>
          <div class="">
            <div>重量</div>
            <el-input
              v-model="data.weight"
              placeholder="请输入重量"
              size="mini"
              clearable
            ></el-input>
          </div>
          <div class="">
            <div>商品品牌</div>
            <el-input
              v-model="data.brand"
              placeholder="请输入商品品牌"
              size="mini"
              clearable
            ></el-input>
          </div>
          <div class="">
            <div>备注</div>
            <el-input
              style="width: 800px; margin-left: 10px"
              type="textarea"
              v-model="data.remarks"
              placeholder="请输入备注"
              size="mini"
              clearable
            ></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="组合商品详情"
      :visible.sync="dialogVisibleRow"
      :before-close="handleClose"
      width="950px"
    >
      <div class="dialogVisibleMy">
        <div class="dialogVisibleMy-text">
          <div>
            <div><span class="star"></span> 组合名称</div>
            <el-input
              v-model="data.zh_name"
              placeholder="请输入组合名称"
              size="mini"
              readonly
            ></el-input>
          </div>
          <div class="">
            <div>组合颜色</div>
            <el-input
              v-model="data.zh_color_name"
              placeholder="请输入组合颜色"
              size="mini"
              readonly
            ></el-input>
          </div>
          <div class="">
            <div>成本价</div>
            <el-input
              type="number"
              v-model="data.cost_price"
              placeholder="请输入成本价"
              size="mini"
              readonly
            ></el-input>
          </div>
          <div class="">
            <div>销售价</div>
            <el-input
              type="number"
              v-model="data.sales_price"
              placeholder="请输入销售价"
              size="mini"
              readonly
            ></el-input>
          </div>
          <!-- <div class="">
            <div>分销价</div>
            <el-input
              v-model="data.zh_name"
              placeholder="请输入分销价"
              size="mini"
              clearable
            ></el-input>
          </div> -->
          <div class="">
            <div>吊牌价</div>
            <el-input
              type="number"
              v-model="data.tag_price"
              placeholder="请输入吊牌价"
              size="mini"
              readonly
            ></el-input>
          </div>
          <div class="">
            <div>重量</div>
            <el-input
              v-model="data.weight"
              placeholder="请输入重量"
              size="mini"
              readonly
            ></el-input>
          </div>
          <div class="">
            <div>商品品牌</div>
            <el-input
              v-model="data.brand"
              placeholder="请输入商品品牌"
              size="mini"
              readonly
            ></el-input>
          </div>
          <div class="">
            <div>备注</div>
            <el-input
              style="width: 800px; margin-left: 10px"
              type="textarea"
              v-model="data.remarks"
              placeholder="请输入备注"
              size="mini"
              readonly
            ></el-input>
          </div>
        </div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import {
  postAdminOperateGetZhstyle,
  postAdminOperateGetZhstyleDetail,
  postAdminOperateSteZhstyleDetail,
  postAdminOperateSerSynchronization,
} from "@/api";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      loading: false,
      dialogVisible: false, //添加
      dialogVisibleRow: false,
      form: {
        number: "",
        page: 1,
        size: 10,
      },
      tableData: [],
      total: 1,
      formDialog: {
        zh_number: "",
      },
      tableDataDialog: [],
      row: {},
      data: {
        zh_number: "",
        zh_name: "",
        zh_color_name: "",
        cost_price: "",
        sales_price: "",
        tag_price: "",
        weight: "",
        brand: "",
        remarks: "",
      },
      multipleSelection: [],
    };
  },
  activated() {
    let form = this.form;
    this.postAdminOperateGetZhstyle(form);
  },
  methods: {
    async onSync(row) {
      this.$confirm(`确定同步${row.zh_number}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.loading = true;
          try {
            let res = await postAdminOperateSerSynchronization({
              zh_number: row.zh_number,
            });
            let form = this.form;
            this.postAdminOperateGetZhstyle(form);
            this.$message({
              type: "success",
              message: "同步成功!",
            });
            this.loading = false;
          } catch (error) {}
        })
        .catch(() => {});
    },
    async onSubmit() {
      let { multipleSelection, data } = this;
      if (!data.zh_name) {
        return this.$message.warning("请输入组合名称");
      }
      data.cost_price = data.cost_price || 0;
      data.sales_price = data.sales_price || 0;
      data.tag_price = data.tag_price || 0;
      try {
        let res = await postAdminOperateSteZhstyleDetail(data);
        this.$message.success("编辑成功");
        this.handleClose();
      } catch (error) {}
    },
    handleSelectionChange(val) {
      console.log("val----->", val);
      this.multipleSelection = val;
    },
    handleClose() {
      this.tableDataDialog = [];
      this.multipleSelection = [];
      this.data = {
        zh_number: "",
        zh_name: "",
        zh_color_name: "",
        cost_price: "",
        sales_price: "",
        tag_price: "",
        weight: "",
        brand: "",
        remarks: "",
      };
      this.dialogVisible = false;
      this.dialogVisibleRow = false;
    },
    async onAdd(row) {
      let { formDialog } = this;
      formDialog.zh_number = row.zh_number;
      let res = await postAdminOperateGetZhstyleDetail(formDialog);
      let data = res.data;
      this.data = {
        zh_number: data.zh_number,
        zh_name: data.zh_name,
        zh_color_name: data.zh_color_name,
        cost_price: data.cost_price || 0,
        sales_price: data.sales_price || 0,
        tag_price: data.tag_price || 0,
        weight: data.weight,
        brand: data.brand,
        remarks: data.remarks,
      };
      //   this.tableDataDialog = res.data;
      //   this.data.number = row.id;
      this.row = row;
      this.dialogVisible = true;
    },
    async onDetail(row) {
      let { formDialog } = this;
      formDialog.zh_number = row.zh_number;
      let res = await postAdminOperateGetZhstyleDetail(formDialog);
      let data = res.data;
      this.data = {
        zh_number: data.zh_number,
        zh_name: data.zh_name,
        zh_color_name: data.zh_color_name,
        cost_price: data.cost_price || 0,
        sales_price: data.sales_price || 0,
        tag_price: data.tag_price || 0,
        weight: data.weight,
        brand: data.brand,
        remarks: data.remarks,
      };
      //   this.tableDataDialog = res.data;
      //   this.data.number = row.id;
      this.row = row;
      this.dialogVisibleRow = true;
    },
    onLook(type_no) {
      if (!type_no) {
        this.$router.push({
          name: "processSizepdf",
        });
      } else {
        this.$router.push({
          name: "processSizepdf",
          query: { type_no },
        });
      }
    },
    // 查看
    onEdit(type_no) {
      if (!type_no) {
        this.$router.push({
          name: "ProcessMaintenanceSizeEdit",
        });
      } else {
        this.$router.push({
          name: "ProcessMaintenanceSizeEdit",
          query: { type_no },
        });
      }
    },
    async onIs(type_no, status) {
      let obj = {
        type_no: type_no,
        type: 1,
        status: status,
      };
      this.$confirm(`确定${status == 0 ? "解锁" : "锁定"}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await postAdminOperateSetlocking(obj);
          let form = this.form;
          this.postAdminOperateGetZhstyle(form);
        })
        .catch(() => {});
    },
    // 删除
    onDelete(id) {
      let obj = {
        id,
      };
      let { form } = this;
      this.$confirm("确定删除该标签种类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          postAdminOperateDelOrtherProduct(obj).then((res) => {
            this.postAdminOperateGetZhstyle(form);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 采购列表
    async postAdminOperateGetZhstyle(data) {
      this.loading = true;
      this.form = data;
      postAdminOperateGetZhstyle(data)
        .then((res) => {
          this.loading = false;
          console.log("采购列表", res);
          this.tableData = res.data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 搜索
    onSearch() {
      this.form.page = 1;
      this.form.size = 10;
      this.postAdminOperateGetZhstyle(this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
.dialogVisibleMy {
  .dialogVisibleMy-title {
    display: flex;
    padding-bottom: 20px;
    > div {
      margin-right: 20px;
    }
  }
  .dialogVisibleMy-text {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    > div {
      display: flex;
      align-items: center;
      margin-right: 20px;
      margin-bottom: 10px;
      > div {
        width: 70px;
        text-align: right;
      }
      > .el-input {
        width: 200px;
        margin-left: 10px;
      }
    }
  }
}
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.WorkingSchedule {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
}
.goods {
  display: flex;
  align-items: center;
  justify-content: center;
  .goods-img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }
  .goods-div {
    width: 300px;
    > div:nth-child(2) {
      color: #999;
    }
  }
}
</style>
